import React, { useCallback } from 'react'
import { Form, Checkbox, Button, Input, message } from 'antd'
import request from '@/utils/request'
import bigimg from '../views/manage/imgs/book4.jpeg'
import { connect } from 'react-redux'
function Login(props) {
	//路由传参
	console.log('props', props)
	const query = new URLSearchParams(props.location.search)
	const username = query.get('username')
	console.log('query', query)
	const info = () => {
		message.info('请输入正确的用户名或密码', 3)
	}
	const rules = {
		username: [
			{
				required: true,
				message: '请输入用户名',
			},
		],
		password: [
			{
				required: true,
				message: '请输入正确密码',
			},
		],
	}
	const onFinish = useCallback(({ username, password }) => {
		console.log('username:', username)
		request
			.post('/users/administrators', {
				username: username,
				password: password,
			})
			.then(({ data }) => {
				console.log('data', data)
				if (data.code === 200) {
					// localStorage.setItem('userInfo',JSON.stringify(data,data))
					props.login(data.data)
					props.history.push('/manage')
				} else {
					info()
				}
			})
	}, [])
	return (
		<div
			style={{
				backgroundImage: `url(${bigimg})`,
				backgroundRepeat: 'no-repeat',
				backgroundSize: '100% 100%',
				height: '100%',
				paddingTop: 140,
			}}
		>
			<div
				style={{
					marginLeft: 500,
					paddingTop: 30,
					width: 380,
					borderRadius: 25,
					borderStyle: 'solid',
					borderWidth: 1,
					borderColor: '#ddd',
				}}
			>
				<h1 style={{ marginLeft: 80 }}>图书管理系统登录</h1>
				<Form
					name="basic"
					labelCol={{
						span: 6,
					}}
					wrapperCol={{
						span: 16,
					}}
					initialValues={{
						remember: true,
					}}
					onFinish={onFinish}
					autoComplete="off"
				>
					<Form.Item
						label="用户名"
						name="username"
						initialValue={username}
						rules={rules.username}
					>
						<Input />
					</Form.Item>

					<Form.Item
						label="密码"
						name="password"
						rules={rules.password}
					>
						<Input.Password />
					</Form.Item>

					<Form.Item
						name="remember"
						valuePropName="checked"
						wrapperCol={{
							offset: 6,
							span: 16,
						}}
					>
						<Checkbox style={{ marginLeft: 60 }}>免登录</Checkbox>
					</Form.Item>

					<Form.Item
						wrapperCol={{
							offset: 6,
							span: 16,
						}}
					>
						<Button
							style={{ marginLeft: 60 }}
							type="primary"
							htmlType="submit"
						>
							登录
						</Button>
					</Form.Item>
				</Form>
			</div>
		</div>
	)
}

const mapDispatchToProps = function (dispatch, ownProps) {
	console.log('mapDispatchToProps', dispatch, ownProps)
	return {
		login(xx) {
			dispatch({ type: 'login', payload: xx })
		},
	}
}
Login = connect(null, mapDispatchToProps)(Login)
export default Login
